<template>
    <Modal title="打印箱号" v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal"
        :width="800">
        <div>
            箱号选择：<el-button size="small" type="success" @click="handlerClick(true)">全选</el-button>
            <el-button size="small" type="primary" @click="handlerClick(false)">取消全选</el-button>
            <div style="float: right;">
                箱号范围：<el-input style="width: 80px" size="small" type="number" @input="inputChange"
                    v-model="minCount"></el-input>
                <el-input style="width: 80px" type="number" size="small" @input="inputChange"
                    v-model="maxCount"></el-input>
            </div>
        </div>
        <div>
            <el-checkbox border size="small" v-model="it.selected" :true-value="true" :false-value="false"
                v-for="(it, ind) in storageBill.items" :key="ind" style="margin:10px 5px">{{ it.boxNo }}</el-checkbox>
        </div>
        <div>
            <el-select size="small" v-model="templateUrl">
                <el-option v-for="(vl, ky) in paperSizes" :key="ky" :label="ky" :value="vl">
                </el-option>
            </el-select>
        </div>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="modalLoading" @click="ok">确定</el-button>
        </div>
    </Modal>
</template>
<script>
import api from "@/api/api"

export default {
    name: 'StorageProduct',
    data() {
        return {
            paperSizes: {
                "100mm*100mm": api.boxTemplateUrl_100_100,
                "80mm*60mm": api.boxTemplateUrl_80_60,
                "80mm*60mm(新版)": api.boxTemplateUrl_80_60_2,
                "100mm*100mm(没备注)": api.boxTemplateUrl_100_100_no,
                "100mm*100mm_lin": api.boxTemplateUrl_100_100_lin,
                "100mm*100mm(缩小)": api.boxTemplateUrl_70_50

            },
            templateUrl: api.boxTemplateUrl_100_100,
            show: false,
            minCount: 1,
            maxCount: null,
            storageBill: {
                items: [],
            },
            modalLoading: false

        };
    },
    mounted: function () {



    },
    props: [
        'billId'
    ],
    methods: {
        inputChange(input) {
            let minCount = parseInt(this.minCount);
            let maxCount = parseInt(this.maxCount);
            if (minCount >= 1 && maxCount >= 1 && minCount <= maxCount) {
                for (var i = 0; i < this.storageBill.items.length; i++) {

                    let boxNo = this.storageBill.items[i].boxNo;
                    if (boxNo <= maxCount && boxNo >= minCount) {
                        this.storageBill.items[i].selected = true;
                    } else {
                        this.storageBill.items[i].selected = false;
                    }

                }
            }
        },
        handlerClick: function (bol) {
            for (var i = 0; i < this.storageBill.items.length; i++) {
                this.storageBill.items[i].selected = bol;
            }
        },
        hideDialog() {
            this.modalLoading = false;
            this.show = false;
        },
        showDialog() {
            this.show = true;
        },
        showModal: function (value) {
            if (value) {
                this.getDetail();
            } else {
                this.storageBill = {
                    items: []
                };
            }
        },
        getDetail() {
            this.showLoading();
            this.$http.post("/storagebill/printBox.do", { id: this.billId }).then(res => {
                this.hideLoading();
                if (res.status == 0) {
                    this.storageBill = res.obj;
                }
            }, response => {

            });
        },
        ok: function () {


            let orderData = [];
            let obj = { "documentID": this.storageBill.id, contents: [] };
            for (var i = 0; i < this.storageBill.items.length; i++) {
                let item = this.storageBill.items[i];
                let tpurl = this.templateUrl;
                let shippingNo = localStorage.shippingNo;
                let merName = this.merName;

                if (item.selected) {

                    // orderData.push({
                    //     "documentID": this.storageBill.id + "-" + item.boxNo,
                    //     "contents": [{
                    //         data: {
                    //             sysShippingNo: this.storageBill.shippingNo,
                    //             shippingNo: shippingNo,
                    //             merName: merName,
                    //             boxNo: item.boxNo,
                    //             billId: this.storageBill.id,
                    //             remark: item.remark,
                    //             remark1: item.remark1,
                    //             boxCount: this.storageBill.items.length
                    //         },
                    //         templateURL: tpurl
                    //     }]
                    // });

                    obj.contents.push({
                        data: {
                            sysShippingNo: this.storageBill.shippingNo,
                            shippingNo: shippingNo,
                            merName: merName,
                            boxNo: item.boxNo,
                            billId: this.storageBill.billId,
                            remark: item.remark,
                            remark1: item.remark1,
                            boxCount: this.storageBill.items.length
                        },
                        templateURL: tpurl
                    });
                }
            }
            if (obj.contents.length <= 0) {
                this.errorMessage("请先选择要打印的箱号");
                return;
            }
            orderData.push(obj);
            this.$emit("boxCallBack", orderData);
        },
        cancel: function () {
            this.hideDialog();
            this.$emit("cancel");
        }
    },
    computed: {
        merName() {
            // return this.$store.state.user.userName;
            return localStorage.userName;
        }
    }
}
</script>
<style scoped></style>